export default {
  install(app: any) {
    // 滚动动画
    app.directive("AnimateScroll", {
      mounted: (el: any) => {
        setTimeout(() => {
          const { scrollHeight, scrollTop, offsetHeight } = el;

          if (scrollHeight - offsetHeight < 50) return;
          const startScroll = (scrollHeight: any, heightOfect: any) => {
            return setInterval(() => {
              heightOfect = heightOfect + 0.06;
              el.scrollTop = heightOfect;
              if (heightOfect + offsetHeight >= scrollHeight) heightOfect = 0;
            }, 1);
          };

          let intiScroll = startScroll(scrollHeight, scrollTop);

          el.onmouseover = function () {
            clearInterval(intiScroll);
          };
          el.onmouseout = function () {
            const { scrollHeight, scrollTop } = el;
            intiScroll = startScroll(scrollHeight, scrollTop);
          };
        }, 1000);
      },
    });
    app.directive("AnimateDraggable", {
      mounted(el: any) {
        // 设置目标元素基础属性
        el.style.position = "fixed";
        el.title = "左键拖拽自定义位置";

        // 监听鼠标在目标元素上按下
        el.addEventListener("mousedown", (e: any) => {
            const { width, height } = el.getBoundingClientRect(el);
          // 当前目标元素的left与top
          const left = el.offsetLeft;
          const top = el.offsetTop;
          // 保存按下的鼠标的X与Y
          const mouseX = e.clientX;
          const mouseY = e.clientY;

          // 监听鼠标移动
          document.onmousemove = (e) => {
            // 鼠标移动的距离
            const disX = e.clientX - mouseX;
            const disY = e.clientY - mouseY;

            el.style.left = left + disX + "px";
            el.style.top = top + disY + "px";
            return false; // 防止选中文本，文本拖动的问题
          };

          // 监听鼠标抬起
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        });
      },
    });
  },
};
